import React from 'react';

class MainSortTab extends React.Component {
    constructor(props) {
        super(props);
        this.displayName = 'MainSortTab';
        // mode 控制是
        //  club 主页俱乐部的，
        //  athlete 主页运动员的
        this.state = {
            mode: props.mode,
            tabsTitle: {
               club: ["得分顺序", "首字母排序" ],
               athlete: ["进球数排序", "首字母排序"]
            } ,
            tabActiveMode: 0
        }
    }

    onHandleClick(index) {
        this.props.changeTab(index);
        this.setState({
            tabActiveMode: index,
        });
    }

    render() {
        let title = this.state.tabsTitle[this.state.mode].map(function( tab, index ){
                return (
                    <button key={index}  className={ index==this.state.tabActiveMode? 'active': '' }  onClick = {this.onHandleClick.bind(this, index)} > {tab} </button>
                )
            }.bind(this)
        )

        return (
            <div className="mainSortTab">
                {title}
            </div>
        );
    }
}

export default MainSortTab;
